<template>
	<view class="content">
		<view class="search-header">
			<view  class="search" @click="onSearchClick">
				<Search :focus="searchFocus"></Search>
			</view>
			<label class="fabu-btn" @click="onPublish"></label>
		</view>
		<uni-swiper-dot mode="round" :current="swiperCurrentItem" :info="swiperList"
			:dotsStyles="{backgroundColor:'#e3e3e3',selectedBackgroundColor:'#ffffff',border:'0',selectedBorder:'0'}">
			<swiper class="swiper" @change="swiperChange" circular="true" previous-margin="50rpx" next-margin="50rpx">
				<swiper-item v-for="(item,i) in swiperList" :key="i">
					<image class="swiper-item" :class="{active:(i==swiperCurrentItem)}" :src="item"></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="title">热门分类</view>
		<uni-grid :column="4" :showBorder="false" @change="onHotClassClick">
			<uni-grid-item class="hot-class-item" v-for="(item,i) in hotClassList" :key="i" :index="item.id">
				<image class="hot-class-icon" :src="item.url"></image>
				<text class="hot-class-label">{{item.label}}</text>
			</uni-grid-item>
		</uni-grid>
		<view class="title">需求广场<label class="more-btn" @click="onDemandListClick">更多</label></view>
		<view class="demand-list">
			<DemandItem v-for="(item,i) in demandList" :key="i" :options="item" @click="onDemandDetailClick">
			</DemandItem>
		</view>
		<uni-popup ref="popupLogin">
			<view class="popup">
				<view class="popup-header"><label class="close-btn" @click="onPopupClose"></label></view>
				<image class="popup-image" src="../../static/images/icon_wxlogin_bg@3x.png"></image>
				<view class="popup-text">登录个人信息共享平台</view>
				<view class="popup-text">接单快又好</view>
				<button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="wxlogin-btn">
					<image src="../../static/images/icon_weixin@3x.png"></image>微信登录
				</button>
			</view>
		</uni-popup>
		<uni-popup ref="popupDefault">
			<view class="popup-default">
				<image class="popup-image" :src="popupDefaultObj.bg"></image>
				<view class="popup-main">
					<view class="popup-label">{{popupDefaultObj.label}}</view>
					<view class="popup-text">{{popupDefaultObj.text}}</view>
					<button type="primary" class="default-btn" @click="onPupupDefaultClick">{{popupDefaultObj.btnLabel}}</button>
					<label class="close-btn" @click="onPopupClose"></label>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Search from '../../components/search.vue';
	import DemandItem from '../../components/demand-item.vue'
	export default {
		data() {
			return {
				searchFocus: false,
				swiperCurrentItem: 0, //当前轮播位置
				swiperList: ['url', 'url', 'url', 'url'], //轮播列表
				hotClassList: [], // 热门分类列表
				demandList: [], //需求列表
				isauth:1,//0未实名 1实名
				iscompany: 0, //0 无公司 1 审核中 2 成功 3 失败
				popupDefaultObj: {}, // 公司 弹窗
			}
		},
		components: {
			Search,
			DemandItem
		},
		onLoad() {
			// 获取位置信息
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				}
			});
			this.getUserInfo();
			this.getHotClassList();
			this.getDemandList();
		},
		onShow() {
			console.log(1)
		},
		mounted() {

		},
		methods: {
			getUserInfo: function() {
				//调接口获取登录信息
				var islogin = false;
				if (islogin) {
					//已经登录处理
				} else {
					// 未登录处理
					this.$refs.popupLogin.open();
				}
				if (this.isauth) {
					//已经实名认证
				} else {
					// 未认证
					this.popupDefaultObj = {
						bg:"../../static/images/icon_auth_bg@3x.png",
						label: "未实名认证",
						text: "告知当前状态，信息和解决方式， 如果文字换行的情况",
						btnLabel: "前往设置"
					}
					this.$refs.popupDefault.open();
					return;
				}
				//是否有公司
				switch (this.iscompany) {
					case 0:
						this.popupDefaultObj = {
							bg:"../../static/images/icon_company_bg1@3x.png",
							label: "未加入单位",
							text: "告知当前状态，信息和解决方式， 如果文字换行的情况",
							btnLabel: "前往设置"
						}
						this.$refs.popupDefault.open();
						break;
					case 1:
						this.popupDefaultObj = {
							bg:"../../static/images/icon_company_bg1@3x.png",
							label: "公司信息审核中...",
							text: "分公司信息审核中，请耐心等待结果，谢谢~",
							btnLabel: "知道了"
						}
						this.$refs.popupDefault.open();
						break;
					case 2:
						this.popupDefaultObj = {
							bg:"../../static/images/icon_company_bg2@3x.png",
							label: "加入成功",
							text: "恭喜分公司信息审核通过，平台功能可任意使用啦~",
							btnLabel: "知道了"
						}
						this.$refs.popupDefault.open();
						break;
					case 3:
						this.popupDefaultObj = {
							bg:"../../static/images/icon_company_bg3@3x.png",
							label: "加入失败",
							text: "抱歉~由于XXXX，您的审核暂未通过！赶快重新试试吧",
							btnLabel: "返回加入"
						}
						this.$refs.popupDefault.open();
						break;
					default:
						break;
				}
			},
			getPhoneNumber: function(e) {
				//微信登录
				//获取手机号
			},
			onPopupClose: function() {
				this.$refs.popupLogin.close();
				this.$refs.popupDefault.close();
			},
			// 公司 弹窗 按钮
			onPupupDefaultClick: function() {
				if(this.isauth==0){
					uni.navigateTo({
						url: "../../pagesIndex/index/auth",
						})
					return;	
				}
				switch (this.iscompany) {
					case 0:
					case 3:
						uni.navigateTo({
							url: "../../pagesIndex/index/selectCompany"
						})
						break;
					case 1:
					case 2:
						this.$refs.popupDefault.close();
						break;
					default:
						break;
				}
			},
			//获取热门分类
			getHotClassList: function() {
				//调接口 取7条热门分类 手动+其他 id = 0 为全部
				for (var i = 1; i < 8; i++) {
					this.hotClassList.push({
						id: i,
						icon: 'url' + i,
						label: '市场推广' + i
					})
				}
				this.hotClassList.push({
					id: 0,
					icon: "qita",
					label: "其他"
				})
			},
			//点击热门分类跳转
			onHotClassClick: function(e) {
				uni.navigateTo({
					url: '../../pagesIndex/index/classIndex?id=' + e.detail.index
				})
			},
			getDemandList: function() {
				//调接口取需求列表
				for (let i = 1; i <= 10; i++) {
					this.demandList.push({
						id: i,
						title: "招聘派单员",
						userName: "刘小云",
						company: "成都壹贰叁文化有限公司",
						companyIcon: "/static/images/logo.png",
						num: "2",
						time: "2021-07-28",
						typeName: "市场推广"
					})
				}
			},
			//点击需求更多跳转
			onDemandListClick: function() {
				uni.navigateTo({
					url: '../../pagesIndex/index/demandIndex'
				})
			},
			// 跳需求详情
			onDemandDetailClick: function(id) {
				uni.navigateTo({
					url: '../../pagesIndex/index/detail?id=' + id
				})
			},
			// 轮播图切换设置当前轮播位置
			swiperChange: function(e) {
				this.swiperCurrentItem = e.detail.current
			},
			onSearchClick: function(e) {
				console.log(e)
				uni.navigateTo({
					url: '../../pagesIndex/index/search'
				});
			},
			onPublish: function() {
				uni.navigateTo({
					url: '../../pagesIndex/index/selectClass'
				})
			}
		}
	}
</script>

<style>
	.fabu-btn {
		width: 56rpx;
		height: 56rpx;
		background: url(../../static/images/icon_publish@3x.png) center no-repeat #FFFFFF;
		background-size: 54rpx;
		display: inline-flex;
		margin-right: 32rpx;
		margin-left: 32rpx;
	}

	.swiper-item {
		background-color: #007AFF;
		width: 94%;
		margin: 5% 3% 0 3%;
		height: 80%;
		border-radius: 4rpx;
		transition: all 0.5s ease-in;
	}

	.swiper-item.active {
		height: 100%;
		margin-top: 0;
	}

	.title {
		margin: 40rpx 32rpx;
		background: url(../../static/images/icon_tips@3x.png) 0rpx center no-repeat #FFFFFF;
		background-size: 32rpx;
		padding-left: 40rpx;
		color: #000;
		font-size: 32rpx;
	}

	.hot-class-item {
		text-align: center;
	}

	.hot-class-icon {
		margin: 24rpx auto 0;
		width: 88rpx;
		height: 88rpx;
		background-color: #007AFF;
	}

	.hot-class-label {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #5a5a5a;
	}

	.more-btn {
		float: right;
		background: url(../../static/images/icon_jinru@3x.png) right center no-repeat #FFFFFF;
		background-size: 32rpx;
		padding-right: 32rpx;
		font-size: 24rpx;
		color: #b2b2b2;
	}

	.popup .popup-image {
		margin: 0 64rpx;
		width: 352rpx;
		height: 234rpx;
	}

	.popup .popup-text {
		font-size: 26rpx;
		color: #181818;
		text-align: center;
	}

	.wxlogin-btn {
		width: 360rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 34rpx;
		background-color: #07C160 !important;
		border-radius: 16rpx;
		margin: 32rpx auto;
	}

	.wxlogin-btn image {
		width: 54rpx;
		height: 54rpx;
		vertical-align: middle;
		margin-right: 5rpx;
	}
	.popup{
		border-radius: 20rpx;
	}
	.popup-default {
		width: 480rpx;
	}

	.popup-main {
		position: absolute;
		top: 0;
		text-align: center;
	}

	.popup-label {
		font-size: 40rpx;
		color: #000000;
		font-weight: 500;
		padding-top: 265rpx;
	}

	.popup-default .popup-text {
		font-size: 26rpx;
		color: #B2B2B2;
		margin: 24rpx 39rpx 20rpx;
	}

	.popup-default .popup-image {
		width: 480rpx;
		height: 540rpx;
	}

	.popup-default .default-btn {
		border: 0;
		border-top: 2rpx solid #F8F8F8;
		background-color: #FFFFFF;
		color: #1371FF;
		font-size: 40rpx;
		font-weight: 500;
		border-radius: 0 !important;
	}

	.popup-default .default-btn::after {
		display: none;
	}

	.popup-default .close-btn {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		display: block;
		left: 50%;
		transform: translateX(-24rpx);
		bottom: -102rpx;
		background: url(../../static/images/icon_close2@3x.png) center no-repeat;
		background-size: 48rpx;
	}
</style>
